制作の目的・課題設定
今回は、Flexboxを活用したレイアウトの構築を習得することを目的に制作しました。ボタンの配置や配色を工夫しながら、CSSによるホバー時やクリック時の動きを取り入れ、デザイン性と操作性を両立させました。
工夫した点
全体をパステルカラーで統一し、丸みのあるボタンと柔らかな印象のGoogle Fontsを組み合わせ、親しみやすいデザインに仕上げました。
また、CSSのグラデーションや影を活用し、ボタンに立体感と奥行きを持たせました。さらに、ボタンを押した際の沈み込む動きや、カーソルを合わせた際の色の変化を実装し、視覚的な楽しさと操作感を表現しています。背景には和紙のような質感の画像をリピート表示し、温かみのある柔らかな雰囲気を演出しました。
計算はできませんが、ボタンをクリックすることができます。